<template>
    <div class="set-trigger-wrapper">
        <div class="title">
            <span>任务设置</span>
            <el-icon color="#409eff" @click="onSetJob" v-if="detailData && detailData.state == 'DISABLED'"
                ><Edit
            /></el-icon>
        </div>
        <el-skeleton animated :loading="loading">
            <template #template>
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
                <el-skeleton-item />
            </template>
            <template #default>
                <el-descriptions v-if="detailData" :column="4" border>
                    <el-descriptions-item label="开始执行日期">
                        {{ detailData.triggerModel?.beginTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="结束执行日期">
                        {{ detailData.triggerModel?.endTime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="任务超时">
                        {{ detailData.triggerModel?.timeout }}秒
                    </el-descriptions-item>
                    <el-descriptions-item label="超时处理方式">
                        {{ TimeoutMethod[detailData.triggerModel?.timeoutMethod] }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="4" label="触发表达式" v-if="detailData.triggerType == 'TIMER'">
                        <div class="value">{{ detailData.triggerModel?.crontab }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue';
import { showPopupBox } from '@great/utils';
import SetModal from '../../../list/SetModal.vue';

const props = defineProps<{
    detailData?: Record<string, any>;
}>();
enum TimeoutMethod {
    failed = '设置执行结果为失败'
}
const initDetail = inject('initDetail');
const loading = ref(true);

const onSetJob = () => {
    showPopupBox(SetModal, {
        row: props.detailData as any,
        callBack: initDetail as () => Promise<void>
    });
};

watch(
    () => props.detailData,
    newValue => {
        if (newValue) loading.value = false;
    },
    { immediate: true }
);
</script>
<style scoped lang="scss">
.set-trigger-wrapper {
    margin-top: 15px;
    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > span {
            margin-right: 5px;
        }
        .el-icon {
            cursor: pointer;
        }
    }
    .el-descriptions {
        .label {
            display: flex;
            align-items: center;
            > span {
                margin-right: 3px;
            }
        }
        .value {
            height: 64px;
        }
        .version-item-value {
            display: flex;
            justify-content: space-between;
        }
        .img-item-value {
            display: flex;
            align-items: center;
        }
    }
}
</style>
